<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>我的文章</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
body{
    background: #F5F7F8;
}
.comGodList .btmInfo .like {
	color: #adadad;
	padding-left: 0.85rem;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: auto 0.6rem;
	background-image: url(../../image/common/21.png);
}
.comGodList .btmInfo .like.on {
	color: #333;
	background-image: url(../../image/common/22.png);
}
.earnPrice{
  position: absolute;
  top:0.45rem;
  right:0;
  width: 2.9rem;
  height: 1rem;
  background: #E73350;
  border-radius: 100px 0 0 100px;
  font-size: 10px;
  color: #FFFFFF;
  text-align: center;
  line-height: 1.1rem;
}
</style>
</head>
<body>
  <div class="comFlowBox">
  	<div class="comGodList" id="flow_html">
  		<div class="grid-sizer"></div>


  	</div>
  </div>
  <script type="text/x-dot-template" id="flow_tpl">
  {{ for(var i=0;i<4;i++){ }}
  <div class="item">
  	<div class="inner">
  		<div class="photo"><img src="../../image/demo/03.png" alt=""></div>
  		<div class="textBox">
  			<div class="title aui-flex-col aui-flex-middle">
  				<div class="aui-ellipsis-2">欧莱雅护发精油修复干枯防毛躁柔顺护发素正品</div>
  			</div>
  			<div class="btmInfo aui-flex-col aui-flex-middle aui-flex-between">
  				<div><div class="avatar"><img src="../../image/demo/02.jpg" alt=""></div></div>
  				<div class="flex-auto name aui-ellipsis-1">Kelly霏霏</div>
  				<div class="like" tapmode onClick="togLike(this)">7629</div>
  			</div>
  		</div>
  	</div>
  </div>
  <div class="item">
  	<div class="inner">
  		<div class="photo"><img src="../../image/demo/04.png" alt=""></div>
  		<div class="textBox">
  			<div class="title aui-flex-col aui-flex-middle">
  				<div class="aui-ellipsis-2">欧莱雅护发精油修复干枯防毛躁柔顺护发素正品</div>
  			</div>
  			<div class="btmInfo aui-flex-col aui-flex-middle aui-flex-between">
  				<div><div class="avatar"><img src="../../image/demo/02.jpg" alt=""></div></div>
  				<div class="flex-auto name aui-ellipsis-1">Kelly霏霏</div>
  				<div class="like" tapmode onClick="togLike(this)">7629</div>
  			</div>
  		</div>
  	</div>
  </div>
  <div class="item">
  	<div class="inner">
  		<div class="photo">
        <img src="../../image/demo/03.png" alt="">
        <div class="earnPrice">
          赚&yen6.25
        </div>
      </div>
  		<div class="textBox">
  			<div class="title aui-flex-col aui-flex-middle">
  				<div class="aui-ellipsis-2"><span class="tag">天猫</span>欧莱雅护发精油修复干枯防毛躁柔顺护发素正品</div>
  			</div>
  			<div class="aui-flex-col aui-flex-middle priceBox">
  				<div class="nowPrice">¥69.8</div>
  				<div class="delPrice">¥<del>79.8</del></div>
  			</div>
  			<div class="aui-flex-col aui-flex-middle aui-flex-between">
  				<dl class="quan outline aui-flex-col aui-flex-middle">
  					<dt>券</dt>
  					<dd>10元</dd>
  				</dl>
  				<div class="sale">月销 7629件</div>
  			</div>
  		</div>
  	</div>
  </div>
  <div class="item">
  	<div class="inner">
  		<div class="photo">
        <img src="../../image/demo/04.png" alt="">
        <div class="earnPrice">
          赚&yen6.25
        </div>
      </div>
  		<div class="textBox">
  			<div class="title aui-flex-col aui-flex-middle">
  				<div class="aui-ellipsis-2"><span class="tag">天猫</span>欧莱雅护发精油修复干枯防毛躁柔顺护发素正品</div>
  			</div>
  			<div class="aui-flex-col aui-flex-middle priceBox">
  				<div class="nowPrice">¥69.8</div>
  				<div class="delPrice">¥<del>79.8</del></div>
  			</div>
  			<div class="aui-flex-col aui-flex-middle aui-flex-between">
  				<dl class="quan outline aui-flex-col aui-flex-middle">
  					<dt>券</dt>
  					<dd>10元</dd>
  				</dl>
  				<div class="sale">月销 7629件</div>
  			</div>
  		</div>
  	</div>
  </div>
  {{ } }}
  </script>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="../../script/masonry.pkgd.min.js"></script>
<script type="text/javascript">
	var gridDom = '#flow_html';
	var grid;
    apiready = function() {
        api.parseTapmode();
		// 监听到达底部
		api.addEventListener({
		  name:'scrolltobottom',
		  extra:{
			  threshold: 0
		  }
		}, function(ret, err){
			getFlow();
		});
    };
	//调用瀑布流
	grid = new Masonry( gridDom, {
		columnWidth: '.grid-sizer',
		itemSelector: '.item',
		percentPosition: true
	});
	imagesLoaded( gridDom, function() {
		grid.layout();
	});
	getFlow();
	//瀑布流
	function getFlow(){
		var tpl = $$('#flow_tpl').html();
		var tempFn = doT.template(tpl);
		var elem = $$( tempFn( ) );

		$$(gridDom).append( elem );
		grid.appended( elem );
		imagesLoaded( gridDom, function() {
			grid.layout();
		});
		// api.parseTapmode();
	}
	//喜欢 不喜欢切换
	function togLike(el){
		var _this = $$(el);
		_this.toggleClass('on');
	}
</script>
</html>
